<template>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column label="#" style="height:80px">
			<template slot-scope="scope">
				<span style="margin-left: 10px">{{ scope.row.id }}</span>
			</template>
		</el-table-column>
		<el-table-column label="标题" style="height:80px">
			<template slot-scope="scope">
				<span style="margin-left: 10px">{{ scope.row.title }}</span>
			</template>
		</el-table-column>
		<el-table-column label="封面" style="height:80px">
			<template slot-scope="scope">
				<img width="80" :src="scope.row.poster" />
			</template>
		</el-table-column>
		<el-table-column label="类型" style="height:80px">
			<template slot-scope="scope">
				<span style="margin-left: 10px">{{ scope.row.type }}</span>
			</template>
		</el-table-column>
		<el-table-column label="发布者" style="height:80px">
			<template slot-scope="scope">
				<span style="margin-left: 10px">{{ scope.row.author }}</span>
			</template>
		</el-table-column>
		<el-table-column label="创建时间" style="height:80px">
			<template slot-scope="scope">
				<span style="margin-left: 10px">{{ scope.row.created_at }}</span>
			</template>
		</el-table-column>

		<el-table-column label="操作">
			<template slot-scope="scope">
				<el-button size="mini" icon="el-icon-view" type="success" circle @click="handleView(scope.$index, scope.row)"></el-button>
				<el-button size="mini" icon="el-icon-edit" type="primary" circle @click="handleEdit(scope.$index, scope.row)"></el-button>
				<el-button size="mini" icon="el-icon-delete" circle type="danger" @click="handleDelete(scope.$index, scope.row)"></el-button>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
export default {
	data() {
		return {
			tableData: []
		};
	},
	created() {
		fetch('http://120.27.209.174:1010/api/v1/posts')
			.then(res => res.json())
			.then(res => {
				console.log(res.data);
				this.tableData = res.data;
			});
	},
	methods: {
		handleEdit(index, row) {
			console.log(index, row);
		},
		handleDelete(index, row) {
			console.log(index, row);
		},
		handleView(row) {
			this.$router.push({
				name: 'AdminArticleDetail',
				params: {
					article_id: row.id
				}
			});
			// console.log(row.id);
		}
	}
};
</script>

<style>
.el-main {
	line-height: 40px !important;
}
</style>
